<style>
	.layui-form-label{width: 90px;}
</style>
<div class="main">
	<div class="container">
		<div style="background:#fff;min-height: 800px; margin: 20px 0;display: flex;">
			<div class="user_center_left">
				{include file="common/sidenav"}
			</div>
			<div class="user_center_right">
				<div class="user_center_right_hd">
					编辑产品
				</div>
				<div class="user_center_right_bd" style="display: flex;align-items: center;justify-content: center;">
					<div class="center_form" style="width: 700px;">
						<form class="layui-form" action="">
							<div class="layui-form-item">
								<label class="layui-form-label">产品图片</label>
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="ID-upload-demo-btn">点击上传</button>
									<img id="logo_img" class="layui-upload-img" style="width:100px;height:auto;" src="{$rs.image|htmlentities}">
									<input type="hidden" id="logo" value="{$rs.image|htmlentities}">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">产品名称</label>
								<div class="layui-input-block">
									<input type="text" name="name" id="name" lay-verify="required" value="{$rs.name|htmlentities}"
										placeholder="请输入" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">产品型号</label>
								<div class="layui-input-block">
									<input type="text" name="chanpinxinghao" id="chanpinxinghao" lay-verify="required" value="{$rs.chanpinxinghao|htmlentities}"
										placeholder="请输入" autocomplete="off" class="layui-input">
								</div>
							</div>

							<div class="section layui-form" style="margin-bottom: 15px;">
								<div class="layui-form-item">
									<label class="layui-form-label layui-padding-0"> 产品类别</label>
									<div class="layui-input-block">
										<select id="category_id">
											<option value="">请选择</option>
											{volist name="category" id="item"}
											<option value="{$item.id}" {if($item.id==$rs.category_id)}selected{/if}>{$item.name}</option>
											{/volist}

										</select>
									</div>
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label">产品用途</label>
								<div class="layui-input-block">
									<textarea id="yongtu_content" class="layui-textarea">{$rs.yongtu_content|htmlentities}</textarea>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">产品特点</label>
								<div class="layui-input-block">
									<textarea id="tedian_content" class="layui-textarea">{$rs.tedian_content|htmlentities}</textarea>
								</div>
							</div>
						</form>
						<div class="btn" style="margin-top:30px;">
							<button type="button"
								class="layui-btn layui-btn-lg layui-btn-fluid layui-btn-normal layui-btn-radius"
								onclick="submit()">保存</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

	<script>
		layui.use(function(){
		  var upload = layui.upload;
		  var layer = layui.layer;
		  var element = layui.element;
		  var $ = layui.$;
		  // 单图片上传
		  var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '/api.php/common/upload', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
              // 预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                $('#logo_img').attr('src', result); // 图片链接（base64）
              });

              //layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                console.log(res);
              // 若上传失败
              if(res.code!=1){
                return layer.msg(res.msg);return false;
              }
              // 上传成功的一些操作
              $('#logo').val(res.data.url);
            }

          });

		});

	function submit(){
		if($('#logo').val().trim()==''){
			layer.msg('请上传产品图片', {icon: 5});
			return false;
		}
		if($('#name').val().trim()==''){
			layer.msg('请填写产品名称', {icon: 5});
			return false;
		}
		if($('#chanpinxinghao').val().trim()==''){
			layer.msg('请输入产品型号', {icon: 5});
			return false;
		}
		if($('#category_id').val().trim()==''){
			layer.msg('请输入产品类别', {icon: 5});
			return false;
		}
		if($('#yongtu_content').val().trim()==''){
			layer.msg('请输入产品用户', {icon: 5});
			return false;
		}
		if($('#tedian_content').val().trim()==''){
			layer.msg('请输入产品特点', {icon: 5});
			return false;
		}
        $.ajax({
			type:"POST",
			url:"/api.php/index/edit_product",
			dataType:"json",
			data:{
				"id":{$rs.id},
				"name":$('#name').val().trim(),
				"image":$('#logo').val().trim(),
				"chanpinxinghao":$('#chanpinxinghao').val().trim(),
				"category_id":$('#category_id').val().trim(),
				"yongtu_content":$('#yongtu_content').val().trim(),
				"tedian_content":$('#tedian_content').val().trim(),
			},
          success:function(res){
              console.log(res);

              if(res.code==0){
                  layer.msg(res.msg,{icon:5});

              }else{
                  layer.msg(res.msg,{icon:6},function(){

					  window.location.href="{:url('user/mycompany')}";
                  });
              }
          }
        });
    }

	</script>
</html>
